[V0_FILE]typescriptreact:file="components/font-navigation.tsx" isMerged="true" import Link from "next/link" import type { FontFamily } from "@/lib/fonts" interface FontNavigationProps { prev: FontFamily | null next: FontFamily | null } export function FontNavigation({ prev, next }: FontNavigationProps) { return ( ) } [V0_FILE]typescriptreact:file="components/use-case-tags.tsx" isMerged="true" interface UseCaseTagsProps { useCases: string[] } export function UseCaseTags({ useCases }: UseCaseTagsProps) { return (

Recommended For

{useCases.map((useCase) => ( {useCase} ))}

) } [V0_FILE]typescriptreact:file="app/fonts/[slug]/page.tsx" isMerged="true" import { notFound } from "next/navigation" import { getFontBySlug, getAdjacentFonts, getAllFonts } from "@/lib/fonts" import { FontPageClient } from "./font-page-client" interface FontPageProps { params: Promise<{ slug: string }> } export async function generateStaticParams() { const fonts = getAllFonts() return fonts.map((font) => ({ slug: font.slug })) } export async function generateMetadata({ params }: FontPageProps) { const { slug } = await params const font = getFontBySlug(slug) if (!font) return { title: "Font Not Found" } return { title: `${font.name} — Neon Type`, description: font.description, } } export default async function FontPage({ params }: FontPageProps) { const { slug } = await params const font = getFontBySlug(slug) if (!font) { notFound() } const { prev, next } = getAdjacentFonts(slug) return } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Klaxon Foundry — Digital Typefaces", description: "A curated collection of typefaces designed for screens, interfaces, and everything in between.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/font-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Link from "next/link" import type { FontFamily } from "@/lib/fonts" interface FontCardProps { font: FontFamily foregroundColor?: string // Added foregroundColor prop } export function FontCard({ font, foregroundColor = "#ffffff" }: FontCardProps) { return (

{font.name}

{font.category}

{/* Neon color hint on hover */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { getAllFonts } from "@/lib/fonts" import { FontCard } from "@/components/font-card" import { ThemeSwitcher } from "@/components/theme-switcher" export default function HomePage() { const fonts = getAllFonts() const [theme, setTheme] = useState({ bg: "#000000", fg: "#ffffff" }) useEffect(() => { document.documentElement.style.setProperty("--scrollbar-thumb", theme.fg) document.documentElement.style.setProperty("--scrollbar-track", theme.bg) }, [theme]) return (

{/* Header */}

Klaxon Foundry setTheme({ bg, fg })} />

{/* Hero */}

Typefaces for the
digital age

A curated collection of typefaces designed for screens, interfaces, and everything in between.

{/* Font List */}

{fonts.map((font) => ( ))}

{/* Footer */}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --scrollbar-thumb: #ffffff; --scrollbar-track: #000000; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --font-serif: "Georgia", "Times New Roman", serif; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } html { scroll-behavior: smooth; } /* Custom scrollbar styling that uses theme colors */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); opacity: 0.5; } ::-webkit-scrollbar-thumb:hover { opacity: 0.8; } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } [V0_FILE]typescriptreact:file="components/variable-controls.tsx" isEdit="true" isMerged="true" "use client" interface VariableControlsProps { axes: { name: string tag: string min: number max: number default: number }[] values: Record onChange: (tag: string, value: number) => void fontSize: number onFontSizeChange: (size: number) => void } export function VariableControls({ axes, values, onChange, fontSize, onFontSizeChange }: VariableControlsProps) { const allControls = [ { name: "Font Size", tag: "fontSize", min: 12, max: 200, value: fontSize, isFontSize: true }, ...axes.map((axis) => ({ name: axis.name, tag: axis.tag, min: axis.min, max: axis.max, value: values[axis.tag] ?? axis.default, isFontSize: false, })), ] return (

Controls

{allControls.map((control) => (

{control.name} {control.value} {control.isFontSize ? "px" : ""}

{ const val = Number(e.target.value) if (control.isFontSize) { onFontSizeChange(val) } else { onChange(control.tag, val) } }} className="w-full h-1 appearance-none bg-current/20 rounded-full cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-current [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-current [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer" />

{control.min} {control.isFontSize ? "px" : ""} {control.max} {control.isFontSize ? "px" : ""}

))}

) } [V0_FILE]typescript:file="lib/fonts.ts" isEdit="true" isQuickEdit="true" isMerged="true" export interface FontFamily { slug: string name: string category: "sans-serif" | "serif" | "monospace" | "display" description: string bgColor: string textColor: string useCases: string[] variable?: { axes: { name: string tag: string min: number max: number default: number }[] } } export const fonts: FontFamily[] = [ { slug: "neon-grotesk", name: "Neon Grotesk", category: "sans-serif", description: "A bold, geometric sans-serif with confident curves and sharp terminals. Perfect for headlines that demand attention.", bgColor: "oklch(70% 0.25 320)", textColor: "oklch(15% 0.02 320)", useCases: ["Headlines", "Branding", "Posters", "UI Elements"], variable: { axes: [{ name: "Weight", tag: "wght", min: 100, max: 900, default: 400 }], }, }, { slug: "volt-mono", name: "Volt Mono", category: "monospace", description: "An electric monospace with distinct character shapes optimized for code and technical documentation.", bgColor: "oklch(75% 0.22 160)", textColor: "oklch(12% 0.03 160)", useCases: ["Code", "Terminal", "Data Display", "Technical Docs"], variable: { axes: [{ name: "Weight", tag: "wght", min: 300, max: 700, default: 400 }], }, }, { slug: "plasma-display", name: "Plasma Display", category: "display", description: "An expressive display typeface with dramatic contrast and fluid strokes. Made for moments that matter.", bgColor: "oklch(68% 0.28 280)", textColor: "oklch(98% 0.01 280)", useCases: ["Display", "Editorial", "Album Art", "Fashion"], }, { slug: "arc-gothic", name: "Arc Gothic", category: "sans-serif", description: "A refined gothic sans with subtle humanist touches. Versatile enough for both print and screen.", bgColor: "oklch(72% 0.20 200)", textColor: "oklch(10% 0.02 200)", useCases: ["Body Text", "Navigation", "Apps", "Magazines"], variable: { axes: [ { name: "Weight", tag: "wght", min: 200, max: 800, default: 400 }, { name: "Slant", tag: "slnt", min: -12, max: 0, default: 0 }, ], }, }, { slug: "ember-serif", name: "Ember Serif", category: "serif", description: "A warm, contemporary serif with generous x-height and crisp details. Reads beautifully at any size.", bgColor: "oklch(70% 0.24 30)", textColor: "oklch(12% 0.03 30)", useCases: ["Long-form", "Books", "Journals", "Luxury Brands"], variable: { axes: [ { name: "Weight", tag: "wght", min: 300, max: 700, default: 400 }, { name: "Optical Size", tag: "opsz", min: 8, max: 144, default: 16 }, ], }, }, ] export function getFontBySlug(slug: string): FontFamily | undefined { return fonts.find((font) => font.slug === slug) } export function getAllFonts(): FontFamily[] { return fonts } export function getAdjacentFonts(slug: string): { prev: FontFamily | null; next: FontFamily | null } { const index = fonts.findIndex((font) => font.slug === slug) if (index === -1) return { prev: null, next: null } return { prev: index > 0 ? fonts[index - 1] : fonts[fonts.length - 1], next: index < fonts.length - 1 ? fonts[index + 1] : fonts[0], } } [V0_FILE]typescriptreact:file="components/font-specimen.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" interface FontSpecimenProps { fontFamily: string variableSettings?: Record fontSize?: number } export function FontSpecimen({ fontFamily, variableSettings, fontSize = 72 }: FontSpecimenProps) { const uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" const lowercase = "abcdefghijklmnopqrstuvwxyz" const numbers = "0123456789" const punctuation = "!@#$%&*()—–.,;:?'" const fontVariationSettings = variableSettings ? Object.entries(variableSettings) .map(([tag, value]) => `"${tag}" ${value}`) .join(", ") : undefined const fontWeight = variableSettings?.wght ?? undefined // Removed width scaleX transform const textStyle: React.CSSProperties = { fontFamily, fontVariationSettings, fontSize: `${fontSize}px`, fontWeight, } return (

Uppercase

{uppercase}

Lowercase

{lowercase}

Numerals

{numbers}

Punctuation

{punctuation}

) } [V0_FILE]typescriptreact:file="components/font-samples.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" interface FontSamplesProps { fontFamily: string variableSettings?: Record fontSize?: number } export function FontSamples({ fontFamily, variableSettings, fontSize = 72 }: FontSamplesProps) { const fontVariationSettings = variableSettings ? Object.entries(variableSettings) .map(([tag, value]) => `"${tag}" ${value}`) .join(", ") : undefined const fontWeight = variableSettings?.wght ?? undefined const headlineSize = fontSize const bodySize = Math.max(16, Math.round(fontSize * 0.28)) const uiSize = Math.max(14, Math.round(fontSize * 0.2)) const smallSize = Math.max(12, Math.round(fontSize * 0.16)) const baseStyle: React.CSSProperties = { fontFamily, fontVariationSettings, fontWeight, } return (

{/* Headline Sample */}

Headline

The quick brown fox jumps over the lazy dog

{/* Body Sample */}

Body Text

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.

{/* UI Sample */}

Interface

Button Label Navigation Caption Text Menu Item

{/* Small Text Sample */}

Small Text

Available in multiple weights and styles. Designed for optimal legibility across print and digital media. Includes extended Latin character support with over 500 glyphs. OpenType features include stylistic alternates, ligatures, and tabular figures.

) } [V0_FILE]typescriptreact:file="components/theme-switcher.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" const themes = [ { bg: "#000000", fg: "#ffffff" }, { bg: "#ffffff", fg: "#000000" }, { bg: "#64FF8F", fg: "#1d1d1d" }, { bg: "#FF513A", fg: "#1d1d1d" }, { bg: "#D6FF64", fg: "#1d1d1d" }, { bg: "#1DFFE7", fg: "#1d1d1d" }, ] export { themes } export function ThemeSwitcher({ onChange, initialIndex = 0, }: { onChange: (bg: string, fg: string) => void initialIndex?: number }) { const [activeIndex, setActiveIndex] = useState(initialIndex) useEffect(() => { setActiveIndex(initialIndex) }, [initialIndex]) return (

{themes.map((theme, index) => (

) } [V0_FILE]typescriptreact:file="components/glyph-grid.tsx" "use client" interface GlyphGridProps { fontFamily: string variableSettings: Record } // Latin Extended-A, Extended-B, and common symbols/glyphs const glyphSets = { "Latin Extended": [ "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", ], "Extended-A": [ "Ā", "ā", "Ă", "ă", "Ą", "ą", "Ć", "ć", "Ĉ", "ĉ", "Ċ", "ċ", "Č", "č", "Ď", "ď", "Đ", "đ", "Ē", "ē", "Ĕ", "ĕ", "Ė", "ė", "Ę", "ę", "Ě", "ě", "Ĝ", "ĝ", "Ğ", "ğ", "Ġ", "ġ", "Ģ", "ģ", "Ĥ", "ĥ", "Ħ", "ħ", "Ĩ", "ĩ", "Ī", "ī", "Ĭ", "ĭ", "Į", "į", "İ", "ı", "Ĳ", "ĳ", "Ĵ", "ĵ", "Ķ", "ķ", "ĸ", "Ĺ", "ĺ", "Ļ", "ļ", "Ľ", "ľ", "Ŀ", ], "Extended-B": [ "ŀ", "Ł", "ł", "Ń", "ń", "Ņ", "ņ", "Ň", "ň", "ŉ", "Ŋ", "ŋ", "Ō", "ō", "Ŏ", "ŏ", "Ő", "ő", "Œ", "œ", "Ŕ", "ŕ", "Ŗ", "ŗ", "Ř", "ř", "Ś", "ś", "Ŝ", "ŝ", "Ş", "ş", "Š", "š", "Ţ", "ţ", "Ť", "ť", "Ŧ", "ŧ", "Ũ", "ũ", "Ū", "ū", "Ŭ", "ŭ", "Ů", "ů", "Ű", "ű", "Ų", "ų", "Ŵ", "ŵ", "Ŷ", "ŷ", "Ÿ", "Ź", "ź", "Ż", "ż", "Ž", "ž", "ſ", ], "Punctuation & Symbols": [ "!", '"', "#", "$", "%", "&", "'", "(", ")", "*", "+", ",", "-", ".", "/", ":", ";", "<", "=", ">", "?", "@", "[", "\\", "]", "^", "_", "`", "{", "|", "}", "~", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", ], "Currency & Math": [ "€", "₹", "₽", "₿", "¢", "£", "¥", "₣", "₤", "₦", "₧", "₨", "₩", "₪", "₫", "₭", "×", "÷", "±", "−", "≠", "≈", "≤", "≥", "∞", "∑", "∏", "√", "∂", "∆", "∫", "∅", "∈", "∉", "∋", "∩", "∪", "⊂", "⊃", "⊄", "⊆", "⊇", "⊕", "⊗", "⊥", "⋅", "°", "′", ], "Arrows & Misc": [ "←", "↑", "→", "↓", "↔", "↕", "↖", "↗", "↘", "↙", "⇐", "⇑", "⇒", "⇓", "⇔", "⇕", "•", "◦", "‣", "⁃", "○", "●", "◐", "◑", "◒", "◓", "◔", "◕", "◖", "◗", "□", "■", "▪", "▫", "▬", "▭", "▮", "▯", "▰", "▱", "△", "▲", "▴", "▵", "▶", "▷", "▸", "▹", ], } export function GlyphGrid({ fontFamily, variableSettings }: GlyphGridProps) { // Build font-variation-settings string const variationSettings = Object.entries(variableSettings) .map(([tag, value]) => `"${tag}" ${value}`) .join(", ") const fontStyle = { fontFamily, fontVariationSettings: variationSettings || undefined, fontWeight: variableSettings.wght || 400, } return (

Glyph Coverage

{Object.entries(glyphSets).map(([setName, glyphs]) => (

{setName}

{glyphs.map((glyph, index) => (

{glyph}

))}

) } [V0_FILE]typescriptreact:file="app/fonts/[slug]/font-page-client.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import type { FontFamily } from "@/lib/fonts" import { FontSpecimen } from "@/components/font-specimen" import { FontSamples } from "@/components/font-samples" import { VariableControls } from "@/components/variable-controls" import { UseCaseTags } from "@/components/use-case-tags" import { FontNavigation } from "@/components/font-navigation" import { ThemeSwitcher, themes } from "@/components/theme-switcher" import { GlyphGrid } from "@/components/glyph-grid" interface FontPageClientProps { font: FontFamily prev: FontFamily | null next: FontFamily | null } export function FontPageClient({ font, prev, next }: FontPageClientProps) { const [variableSettings, setVariableSettings] = useState>({}) const [fontSize, setFontSize] = useState(72) const [bgColor, setBgColor] = useState(themes[0].bg) const [fgColor, setFgColor] = useState(themes[0].fg) // Initialize variable settings with defaults useEffect(() => { if (font.variable) { const defaults: Record = {} font.variable.axes.forEach((axis) => { defaults[axis.tag] = axis.default }) setVariableSettings(defaults) } }, [font]) const handleAxisChange = (tag: string, value: number) => { setVariableSettings((prev) => ({ ...prev, [tag]: value })) } const handleThemeChange = (bg: string, fg: string) => { setBgColor(bg) setFgColor(fg) } // Determine font family for styling const fontFamily = font.category === "monospace" ? "var(--font-mono)" : font.category === "serif" ? "var(--font-serif)" : "var(--font-sans)" return (

{/* Header */}

Klaxon Foundry

{font.category}

{/* Hero */}

{font.name}

{font.description}

{/* Controls */}

{/* Specimen */}

{/* Samples */}

{/* Glyph Grid */}

{/* Use Cases */}

{/* Navigation */}

{/* Footer */}

) }

{font.name}

Typefaces for the digital age

The quick brown fox jumps over the lazy dog

Glyph Coverage

{setName}

{font.name}

Typefaces for the
digital age

About

Tags

Share

About

Tags

Share

More from webrenew

About

Tags

Share

About

Tags

Share

More from webrenew